<template>

    <div
        v-if="content"
        class="work-item"
    >

        <div class="work-item-left">

            <h6>
                <i :class="[temp.icon]"></i>
                <span>{{temp.title}}</span>
            </h6>

            <template v-if="!content.auth">
				<div class="no-auth">
                    <i class="iconfont icon-lock"></i>
                    {{ $t('common.base.tip.noRoleView') }}
                </div>
			</template>

            <template v-else>
                <p class="content">
                    <span class="number" :class="{ 'c-danger': content.indType === 'taskException' }">
                        {{content.mainInd}}</span>
                    <span class="unit">{{ content.unit}}</span>
                </p>

                <div class="footer">

                    <!-- 三个指标的情况 -->
                    <template v-if="temp.deputy && content.deputyInd !== 'NA'">
                        
                        <span class="desc">{{ temp.deputy }}</span>

                        <el-tooltip :content="`${temp.second}:${content.secondInd || ''}`">
                            <span>
                                <i class="iconfont icon-fdn-info tip-icon"></i>
                            </span>
                        </el-tooltip>

                        <span :class="['thirdInd',content.sign ? 'is-rise' : '' ]">
                            <span v-show="content.deputyInd !== '0'" class="sign-icon">
                                <i class="iconfont icon-triangle-down"></i>
                            </span>
                            <span>{{ content.deputyInd}}</span>
                        </span>
                    </template>

                    <template v-else>
                        <!-- 两个指标的情况 -->
                        <span class="desc">{{ temp.second }}</span>
                        <!-- 一个指标确保不显示 -->
                        <span v-if="temp.second"> {{ content.secondInd }} </span>
                    </template>
                </div>
            </template>
        </div>

        
    </div>
</template>

<script>
export default {
    // 看板卡片
    nam:'Card',

    props:{
        // 卡片内容数据
        content:{
            type:Object,
            require:true
        },

        // 该卡片的本地模版
        temp:{
            type:Object,
            require:true
        }
    }
}
</script>


<style scoped lang="scss">
.work-item{
    width:25%;
    padding:16px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    position: relative;
    &::after{
        display: block;
        content: '';
        width:1px;
        height:82px;
        background:#F0F0F0;
        position: absolute;
        top:16px;
        right:0;
    } 

    .work-item-left{
                    
        h6{
            font-size: 14px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            margin:0;
            display: flex;
            align-items: center;
            i.iconfont{
                display: block;
                width: 22px;
                height: 22px;
                border-radius: 50%;
                line-height: 22px;
                text-align: center;
                font-size: 12px;
                color: #fff;
                margin-right:8px;
            }
        }
        p{
            height: 24px;
            font-size: 24px;
            font-family: HelveticaNeue;
            color: rgba(0, 0, 0, 0.85);
            line-height: 24px;
            margin:7px 0 0 1px;
        }

        .no-auth{
            height: 20px;
            font-size: 12px;
            font-weight: 400;
            color: #8C8C8C;
            line-height: 20px;
            text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
            margin-top:12px;
            display: flex;
            .iconfont{
                color:#f56c6c;
                font-size: 12px;
                margin-right:4px;
            }
        }

        .footer{
            height: 20px;
            font-size: 12px;
            font-weight: 400;
            color: #8C8C8C;
            line-height: 20px;
            margin-top:10px;
			.desc {
				margin-right: 6px;
			}
            .tip-icon {
				margin: 0 4px;
				font-size: 12px;
				transform: scale(0.9);
				color: #8c8c8c;
			}

			.thirdInd {
				margin-left: 4px;
				// 默认 朝下 红色
				color: #f56c6c;

				.sign-icon {
					display: inline-block;
					transform: translateY(1px);
					i {
						font-size: 14px;
					}
				}
			}
			.is-rise {
				// 增长朝上 绿色
				color:  #67c23a;
				.sign-icon {
					transform: rotate(180deg);
				}
			}
        }
        .content{
            .number {
				color: #051a13;
				font-size: 24px;
				line-height: 24px;
			}
			.unit {
				font-size: 14px;
			}
            .c-danger{
                color:#f56c6c;
            }
        }
    }
    
   
    .bg-primary {
        background: $color-primary-light-6;
    }
    .bg-success {
        background:  #67c23a;
    }

    .bg-blue {
        background: #1890ff;
    }

    .bg-orange {
        background: #ff7043;
    }

    .bg-yellow {
        background: #ffa726;
    }
}
</style>